<template>
  <el-dialog :model-value="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" label-width="120px">
      <el-form-item prop="name" label="名称">
        <el-input v-model="dataForm.name" type="textarea" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item prop="sort" label="排序">
        <el-input-number v-model="dataForm.sort" controls-position="right" :min="0" label="排序"></el-input-number>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-button @click="emit('close')">取消</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">确定</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, defineProps, defineEmits, watchEffect, nextTick } from "vue";
import { ElMessage } from "element-plus";
import baseService from "@/service/baseService";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  currId: {
    type: String,
    default: ""

  }
});
const emit = defineEmits(["close", "refreshDataList"]);
let dataFormRef = ref();

const dataForm = reactive({
  id: "",
  name: "",
  sort: 0
});

const rules = ref({
  name: [{ required: true, message: "必填项不能为空", trigger: "blur" }]
});

const init = () => {
  dataForm.name = "";
  dataForm.id = "";
  dataForm.sort = 0;
};

watchEffect(() => {
  if (props.visible) {
    init();
  }
});

watchEffect(() => {
  if (props.currId) {
    dataForm.id = props.currId;
  }
});

// 表单提交
const dataFormSubmitHandle = () => {
  dataFormRef.value.validate(async (valid: boolean) => {
    if (!valid) {
      return false;
    }
    let { code } = dataForm.id ? await baseService.put("/sys/news", dataForm) : await baseService.post("/sys/news", dataForm);
    if (code === 0) {
      ElMessage.success("操作成功");
      emit("refreshDataList");
    }
  });
};

defineExpose({
  init
});
</script>

<style lang="less">
.el-popover.el-popper {
  overflow-x: hidden;
}
.mod-sys__menu {
  .menu-list,
  .icon-list {
    .el-input__inner,
    .el-input__suffix {
      cursor: pointer;
    }
  }
  &-icon-popover {
    width: 458px !important;
    overflow-y: hidden !important;
  }
  &-icon-inner {
    width: 100%;
    max-height: 260px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  &-icon-list {
    width: 458px !important;
    padding: 0;
    margin: -8px 0 0 -8px;
    > .el-button {
      padding: 8px;
      margin: 8px 0 0 8px;
      > span {
        display: inline-block;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        font-size: 18px;
      }
    }
  }
}
</style>
